<template>
  <v-base :baseTitle="'计数器'">
    <template slot="baseinfo">
      计数器，提供用户手动输入和单独累加或减少
    </template>
    <template slot="baseform">
      <v-panel :paneltitle="'基础用法'">
        <v-demo>
          <v-counter @on-change="change" slot="header"></v-counter>
          <p slot="code" v-text='demo_normal'>
          </p>
          <p slot="desc">
            计数器的基础用法
          </p>
        </v-demo>
      </v-panel>
      <v-panel :paneltitle="'禁止输入'">
        <v-demo>
          <v-counter @on-change="change" slot="header" :readonly="true"></v-counter>
          <p slot="code" v-text='demo_readonly'>
          </p>
          <p slot="desc">
            计数器的不允许输入，只能通过按钮加减数据
          </p>
        </v-demo>
      </v-panel>
      <v-panel :paneltitle="'禁用状态'">
        <v-demo>
          <v-counter @on-change="change" slot="header" :disabled="true"></v-counter>
          <p slot="code" v-text='demo_disabled'>
          </p>
          <p slot="desc">
            计数器的禁用
          </p>
        </v-demo>
      </v-panel>
      <v-panel :paneltitle="'组件属性'">
        <v-table :cols="attrApiTable.cols" :datas="attrApiTable.datas"></v-table>
      </v-panel>
      <v-panel :paneltitle="'事件'">
        <v-table :cols="eventApiTable.cols" :datas="eventApiTable.datas"></v-table>
      </v-panel>
      <v-panel :paneltitle="'文件上传'">
        <v-uploadfile></v-uploadfile>
      </v-panel>
    </template>
  </v-base>
</template>
<script>
  import base from './base.vue';
  import panel from '@/components/panel/panel.vue';
  import demo from '@/components/componentdemo/componentdemo.vue';
  import table from '@/components/table/table.vue';
  import counter from '@/components/form/counter.vue';
  import uploadfile from '@/components/uploadfile/uploadfile.vue';
  export default{
    data () {
      return {
        demo_normal: '<v-counter @on-change="change"></v-counter>',
        demo_readonly: '<v-counter @on-change="change" :readonly="true"></v-counter>',
        demo_disabled: '<v-counter @on-change="change" :disabled="true"></v-counter>',
        attrApiTable: {
          cols: [{
            code: 'attr',
            value: '参数'
          }, {
            code: 'desc',
            value: '说明'
          }, {
            code: 'type',
            value: '类型'
          }, {
            code: 'option',
            value: '可选值'
          }, {
            code: 'default',
            value: '默认值'
          }],
          datas: [{
            attr: 'readonly',
            desc: '完全只读',
            type: 'Boolean',
            option: '—',
            default: 'false'
          }, {
            attr: 'disabled',
            desc: '禁用',
            type: 'Boolean',
            option: '—',
            default: 'false'
          }]
        },
        eventApiTable: {
          cols: [{
            code: 'name',
            value: '事件名称'
          }, {
            code: 'desc',
            value: '说明',
            width: 2
          }, {
            code: 'param',
            value: '回调参数'
          }],
          datas: [{
            name: 'on-change',
            desc: '当 input 的值改变时触发，返回值和文本框一致',
            param: '格式化后的值'
          }]
        }
      };
    },
    methods: {
      change (value) {
        alert(value);
      }
    },
    components: {
      'v-base': base,
      'v-panel': panel,
      'v-demo': demo,
      'v-table': table,
      'v-counter': counter,
      'v-uploadfile': uploadfile
    },
    mounted: function () {
    }
  };
</script>
<style>
</style>
